<template>
  <drop-wrap :data="data" :index="index" :element="element">
    <el-form-item
      :id="element.cid"
      :prop="prop"
      :rules="element.rules"
      :label="element.options.label"
    >
      <low-treeselect
        :multiple="true"
        :options="options"
        placeholder="Select your favourite(s)..."
        v-model="element.options.defaultValue"
      />
    </el-form-item>
  </drop-wrap>
</template>

<script>
import lowTreeselect from "@riophae/vue-treeselect";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
export default {
  props: ["element", "data", "index"],
  components: { lowTreeselect },
  computed: {
    prop() {
      return `${this.element.fullModelTag}`;
    },
    store() {
      return this.element.getRoot();
    },
  },
  data() {
    return {
      options: [
        {
          id: "fruits",
          label: "Fruits",
          children: [
            {
              id: "apple",
              label: "Apple 🍎",
              isNew: true,
            },
            {
              id: "grapes",
              label: "Grapes 🍇",
            },
            {
              id: "pear",
              label: "Pear 🍐",
            },
            {
              id: "strawberry",
              label: "Strawberry 🍓",
            },
            {
              id: "watermelon",
              label: "Watermelon 🍉",
            },
          ],
        },
        {
          id: "vegetables",
          label: "Vegetables",
          children: [
            {
              id: "corn",
              label: "Corn 🌽",
            },
            {
              id: "carrot",
              label: "Carrot 🥕",
            },
            {
              id: "eggplant",
              label: "Eggplant 🍆",
            },
            {
              id: "tomato",
              label: "Tomato 🍅",
            },
          ],
        },
      ],
    };
  },
};
</script>

<style  scoped>
</style>